import React, { Component } from 'react'
import { NavBar, InputItem, Icon, TextareaItem, Button, WhiteSpace} from 'antd-mobile';
import './index.css';
import ChooseAvatar from '../../components/chooseAvatar/Avatar';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { improveBossSubmit }  from '../../redux/reducers/user.reducer.js';

class bossinfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            toLoginB:false,
            avatar:'',
            position:'',
            company:'',
            paymoney:'',
            ask:''
        }
        this.onChange = this.onChange.bind(this);
        this.onLeftClick = this.onLeftClick.bind(this);
        this.chooseAvatar = this.chooseAvatar.bind(this);
        this.submitClick = this.submitClick.bind(this);
    }

    onChange(key,val){
        this.setState({
            [key]:val
        })
    }

    onLeftClick(){
        // 跳转
        this.setState({
            toLoginB:true
        })
        this.props.history.push('/login');
    }
    chooseAvatar(text){
        // let user = this.state.user;
        // user.choose_avatar = text;
        // this.setState({
        //     user:user
        // })
        this.setState({
            avatar:text
        })
    }
    submitClick(){
        this.props.improveBossSubmit(this.state);
        console.log(this.props)
    }

    render() {
        return (
            <div>
                 {this.props.user.redirectPath?<Redirect to={this.props.user.redirectPath}></Redirect>:null}

                 <NavBar
                      icon={<Icon type="left" />}
                      onLeftClick={this.onLeftClick}>Boss完善信息</NavBar>

                {this.state.avatar?(<div className='choose_box'>
                    您已经选择：<span className='avatar'>{this.state.avatar}
                    </span> 头像</div>):(<div className="no_choose">暂未选择头像</div>)}
                {this.props.msg?
                    <p className="msg">{this.props.msg} !</p>
                    :''}
                 <ChooseAvatar chooseAvatar={this.chooseAvatar}></ChooseAvatar>
                 <InputItem onChange={(val) => this.onChange('position',val)}>招聘职位</InputItem>
                 <InputItem onChange={(val) => this.onChange('company',val)}>公司名称</InputItem>
                 <InputItem onChange={(val) => this.onChange('paymoney',val)}>薪资待遇</InputItem>
                 <TextareaItem rows={3} title='职位要求' autoHeight
                 onChange={(val) => this.onChange('ask',val)}></TextareaItem>
                 <Button type="primary" onClick={this.submitClick}>提 交</Button>
                 <WhiteSpace></WhiteSpace>
            </div>
        )
    }
}

// const mapStateToProps = (state,props) => {
//     // 可以使用this.props.User
//     return {
//         User:state.userReducer
//     }
// }

// const mapDispatchToProps = (dispatch,props) => {
//     // this.props.improveBossSubmit
//     // 返回对象
//     return {
//         improveBossSubmit:improveBossSubmit
//     }
// }

// export default connect(mapStateToProps,mapDispatchToProps)(bossinfo);

// 会订阅store,每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。
const mapStateToProps = (state,props)=>{
    return {
        user:state.userReducer
    }
}

export default connect(
    mapStateToProps,
    {improveBossSubmit}
)(bossinfo);